﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
 * WYMeditor : what you see is What You Mean web-based editor
 * Copyright (C) 2006 H.O.net - http://www.honet.be/
 * Dual licensed under the MIT (MIT-license.txt)
 * and GPL (GPL-license.txt) licenses.
 *
 * For further information visit:
 * 		http://www.wymeditor.org/
 *
 * File Name:
 *		editor.htm
 *		Main editor container.
 *		See the documentation for more info.
 *
 * File Authors:
 * 		Jean-François Hovinne (jf.hovinne@wymeditor.org)
 *		Daniel Reszka (d.reszka@wym-editor.org)
-->

<html>
<head>
<title>WYMeditor</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="skins/editor-skin.css" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="lowpro.js"></script>
<script type="text/javascript" src="firebug/firebug.js"></script>
<script type="text/javascript" src="wymeditor.js"></script>
</head>

<body id="main_body" class="editor">
<div id="topdiv">

<div id="header">
<a href="http://www.wymeditor.org/"><img id="logo-main" src="images/wym-editor.png" width="127" height="19" alt="WYMeditor logo" /></a>
</div>

<!-- caretpos keeps cursor position -->
<input type="hidden" name="caretpos" id="caretpos" value="0" />

	<!-- for debugging purposes -->
	<div id="m_debug">
	<a id="m_remove_attrs" title="Remove all attributes from selected element (for debugging purposes)" href="#">Remove All Attributes</a>
	<a id="m_cursor_pos" title="Get cursor position (for debugging purposes)" href="#">Cursor Position</a>
	<a id="m_selected_element" title="Get selected element (for debugging purposes)" href="#">Selected Element</a>
	</div>


<div id="toolbars">

 	<!-- basic commands -->
	<div id="m_basic" style="width:340px;">
	  <select id="block_selector" style="float:left;">
  	  <option>---</option>
    	<option value="p">Paragraph</option>
    	<option value="h1">Heading 1</option>
    	<option value="h2">Heading 2</option>
    	<option value="h3">Heading 3</option>
    	<option value="h4">Heading 4</option>
    	<option value="h5">Heading 5</option>
    	<option value="h6">Heading 6</option>
    	<option value="pre">Preformatted</option>
    	<option value="blockquote">Blockquote</option>
    </select>
  	<a id="strong" title="Strong" href="#">Strong</a>
  	<a id="italic" title="Italics" href="#">Italic</a>
  	<a id="sup" title="Supercript" href="#">Superscript</a>
  	<a id="sub" title="Subscript" href="#">Subscript</a>
  	<!-- wemust remove class attribute before converting from P to OL or UL -->
  	<a id="ordered_list" title="Ordered list" href="#" >Ordered List</a>
  	<a id="unordered_list" title="Unordered list" href="#" >Unordered List</a>
  	<a id="indent" title="Indent" href="#" >Indent</a>
  	<a id="outdent" title="Outdent" href="#" >Outdent</a>
	</div>
	
	<div id="m_undo_redo">
	<a id="undo" title="Undo" href="#" >Undo</a>
	<a id="redo" title="Redo" href="#" >Redo</a>
	</div>

	<!-- objects : link, image, table
	<div id="m_objects">
	<a id="link" title="Create link" href="dialogs/link.htm">Link</a>
	<a id="unlink" title="Unlink" href="#">Unlink</a>
	<a id="m_image" title="Insert image" href="#">Image</a>
	<a id="m_table" title="Insert table" href="#">Table</a>
	</div> -->

	<!-- table : advanced commands -->
	<div id="m_table_advanced">
	<a id="m_table_insert_row_after" title="Insert new row after current row" href="#">Insert Row After</a>
	<a id="m_table_insert_row_before" title="Insert new row before current row" href="#">Insert Row Before</a>
	<a id="m_table_insert_col_after" title="Insert new column after current column" href="#">Insert Col After</a>
	<a id="m_table_insert_col_before" title="Insert new column before current column" href="#">Insert Col Before</a>
	<a id="m_table_delete_row" title="Delete current row" href="#">Delete Row</a>
	<a id="m_table_delete_col" title="Delete current column" href="#">Delete Col</a>
	</div>

	<!-- advanced commands  -->
	<div id="m_advanced">
	<a id="html" title="View source code" href="#">Show / Hide HTML</a>
	</div>
</div>

<div id="panels">
	<!-- containers (h1..h6, pre, ...) -->

	<!-- classes : setClass(class name,list of allowed containers,list of conflicting classes) -->
	<div id="m_class">
	<h2>Classes</h2>
	<a id="m_remove_class" href="#">Remove Classes</a>
	<h3>Common</h3>
	<a href="#" name="hidden-note">note (hidden)</a>
	<h3>Paragraph</h3>
	<a href="#" name="important">important</a>
	<a href="#" name="date">date</a>
	<a href="#" name="block">side block</a>
	<h3>Image</h3>
	<a href="#" name="border">border</a>
	</div>

	<!-- custom panel -->
	<div id="m_custom">
	<h2>Special</h2>
	<a href="#" title="Insert WYMeditor's description">Insert WYMeditor's description</a>
	<a href="#" title="Insert template">Insert template</a>
	</div>
	
	<!-- miscellaneous -->
	<div id="m_misc">
	<h2>Info</h2>
	Copy-Paste clean up:<span id="m_paste_cleanup_flag_on">ON</span><span id="m_paste_cleanup_flag_off">OFF</span>
	</div>
</div>

<!-- html value -->
<textarea name="txthtml" id="txthtml" cols="100" rows="20" style="display:none"></textarea>

<!-- the editor - saveCaret saves cursor position - setImgEvent handles click on images -->
<div contentEditable name="editor" id="editor">

<h1>WYMeditor</h1>
<h2>What is WYMeditor ?</h2>
<p><strong>WYMeditor</strong> is a web-based WYSIWYM editor.</p>
<p class="block"><strong>WYMeditor</strong>'s main concept is to leave details of the document's visual layout, and to concentrate on its structure and meaning, while trying to give the user as much comfort as possible (at least as WYSIWYG editors).</p>
<p><strong>WYMeditor</strong> has been created to generate a perfectly structured XHTML code, to conform to the W3C specifications and to facilitate further processing by modern applications.</p>
<p>With <strong>WYMeditor</strong>, the code can't be contaminated by visual informations like font styles and weights, borders, colors, ...<br />
The end-user can concentrate on rich content, while layout and design are handled via style-sheets. The result is easy and quick maintenance of the information.</p>
<p>As the code is compliant to W3C specifications, you can for example process it using a XSLT (at the client or the server side), giving you a wide range of applications.</p>

<p><strong>WYMeditor</strong> is dual licensed under the MIT and GPL licenses and is maintained by H.O.net, Jean-François Hovinne and Daniel Reszka. If you want to contribute, don't hesitate to contact us.</p>

</div>

<!-- the editor -->
<iframe id="iframe_editor" src="iframe.htm"></iframe>

</div>
</body>
</html>
